<template>
  <div class="login">
    <div class="box">
      <img class="logo" src="@/assets/common/login-logo.png" alt="">

      <el-form ref="xxx" :model="from" :rules="rules">

        <el-form-item prop="mobile">
          <el-input v-model="from.mobile" prefix-icon="el-icon-user-solid" />
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="from.password" prefix-icon="el-icon-user-solid" show-password />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width: 100%; font-size: 20px;" @keyup.enter.native="submitForm" @click="submitForm">登录</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>

import { syslogin } from '@/api/user'

export default {
  data() {
    return {
      from: {
        mobile: '13800000002',
        password: '123456'
      },
      rules: {
        mobile: [
          { required: true, message: '不能为空', trigger: 'change' },
          { min: 5, max: 11, message: '5-11位谢谢', trigger: 'change' }
        ],
        password: [
          { required: true, message: '不能为空', trigger: 'change' },
          { message: '输入6-11位账号', min: 6, max: 11, trigger: 'change' }
        ]

      }

    }
  },
  methods: {

    // 点击验证是否通过
    // 通过则请求
    // 在存把token 存到vuex
    async submitForm() {
      try {
        await this.$refs.xxx.validate()

        const res = await syslogin(this.from)

        this.$store.commit('user/SET_TOKEN', res.data.data)
        console.log(res)

        this.$message.success('登录成功')
        this.$router.replace('/')
      } catch (error) {
        console.log(error, '登录错误')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.login {
  height: 100vh;
  background: url("~@/assets/common/login.jpg") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .box {
    .logo {
      margin-bottom: 30px;
    }

    ::v-deep .el-input__inner {
      height: 48px;
      background-color: #d3e4ff;
    }
  }
}
</style>
